<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>员工管理系统 - 首页</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <style>
    body {
      min-height: 100vh;
      overflow-x: hidden;
    }
    .sidebar {
      background-color: #2c3e50;
      color: #ecf0f1;
      min-height: 100vh;
      width: 250px;
      transition: all 0.3s;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1030;
    }
    .sidebar.collapsed {
      margin-left: -250px;
    }
    .sidebar-header {
      padding: 15px 20px;
      background-color: #1a2530;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .sidebar-header h3 {
      margin: 0;
      font-size: 1.4rem;
      font-weight: 600;
    }
    .sidebar-menu {
      padding: 0;
      list-style: none;
    }
    .sidebar-menu .menu-item {
      position: relative;
    }
    .sidebar-menu .menu-link {
      display: flex;
      align-items: center;
      padding: 12px 20px;
      color: #ecf0f1;
      text-decoration: none;
      transition: all 0.3s;
    }
    .sidebar-menu .menu-link:hover {
      background-color: #34495e;
    }
    .sidebar-menu .menu-link.active {
      background-color: #3498db;
    }
    .sidebar-menu .menu-link i {
      margin-right: 10px;
      width: 20px;
      text-align: center;
    }
    .sidebar-menu .menu-text {
      flex: 1;
    }
    .sidebar-menu .submenu {
      padding-left: 20px;
      list-style: none;
      display: none;
    }
    .sidebar-menu .menu-item.open > .submenu {
      display: block;
    }
    .sidebar-menu .submenu .menu-link {
      padding: 8px 20px;
    }
    .main-content {
      margin-left: 250px;
      transition: all 0.3s;
      padding: 20px;
      min-height: 100vh;
    }
    .main-content.expanded {
      margin-left: 0;
    }
    .navbar {
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 10px 20px;
      margin-bottom: 20px;
    }
    .user-dropdown {
      margin-left: auto;
    }
    .user-dropdown .dropdown-toggle {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #333;
    }
    .user-dropdown .dropdown-toggle::after {
      display: none;
    }
    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #3498db;
      color: white;
      font-weight: bold;
      margin-right: 8px;
    }
    .content-wrapper {
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
      padding: 20px;
    }
    .dashboard-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }
    .stat-card {
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      padding: 20px;
      display: flex;
      align-items: center;
    }
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      font-size: 24px;
      color: white;
    }
    .stat-details {
      flex: 1;
    }
    .stat-value {
      font-size: 24px;
      font-weight: bold;
      margin: 0;
    }
    .stat-label {
      color: #6c757d;
      margin: 0;
    }
    .bg-primary-soft {
      background-color: #3498db;
    }
    .bg-success-soft {
      background-color: #2ecc71;
    }
    .bg-warning-soft {
      background-color: #f39c12;
    }
    .bg-danger-soft {
      background-color: #e74c3c;
    }
    .recent-activities {
      margin-bottom: 30px;
    }
    .activity-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }
    .activity-item:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
    .activity-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      font-size: 18px;
      color: white;
    }
    .activity-details {
      flex: 1;
    }
    .activity-title {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
    }
    .activity-time {
      color: #6c757d;
      font-size: 12px;
    }
    
    /* 移动端适配 */
    @media (max-width: 768px) {
      .sidebar {
        margin-left: -250px;
      }
      .sidebar.active {
        margin-left: 0;
      }
      .main-content {
        margin-left: 0;
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <!-- 侧边栏 -->
  <div class="sidebar" id="sidebar">
    <div class="sidebar-header">
      <h3>员工管理系统</h3>
      <button class="btn btn-link text-light p-0 d-md-none" id="close-sidebar">
        <i class="bi bi-x-lg"></i>
      </button>
    </div>
    
    <ul class="sidebar-menu">
      <li class="menu-item">
        <a href="#dashboard" class="menu-link active" data-section="dashboard">
          <i class="bi bi-house-door"></i>
          <span class="menu-text">控制台</span>
        </a>
      </li>
      
      <li class="menu-item">
        <a href="#" class="menu-link" id="userManagement">
          <i class="bi bi-people"></i>
          <span class="menu-text">用户管理</span>
          <i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul class="submenu">
          <li class="menu-item">
            <a href="#user-list" class="menu-link" data-section="user-list">
              <i class="bi bi-circle"></i>
              <span class="menu-text">用户列表</span>
            </a>
          </li>
          <li class="menu-item">
            <a href="#role-list" class="menu-link" data-section="role-list">
              <i class="bi bi-circle"></i>
              <span class="menu-text">角色管理</span>
            </a>
          </li>
          <li class="menu-item">
            <a href="#permission-list" class="menu-link" data-section="permission-list">
              <i class="bi bi-circle"></i>
              <span class="menu-text">权限管理</span>
            </a>
          </li>
        </ul>
      </li>
      
      <li class="menu-item">
        <a href="#employee-list" class="menu-link" data-section="employee-list">
          <i class="bi bi-person-badge"></i>
          <span class="menu-text">员工管理</span>
        </a>
      </li>
      
      <li class="menu-item">
        <a href="#department-list" class="menu-link" data-section="department-list">
          <i class="bi bi-diagram-3"></i>
          <span class="menu-text">部门管理</span>
        </a>
      </li>
      
      <li class="menu-item">
        <a href="#position-list" class="menu-link" data-section="position-list">
          <i class="bi bi-briefcase"></i>
          <span class="menu-text">职位管理</span>
        </a>
      </li>
      
      <li class="menu-item">
        <a href="#" class="menu-link" id="attendanceManagement">
          <i class="bi bi-calendar-check"></i>
          <span class="menu-text">考勤管理</span>
          <i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul class="submenu">
          <li class="menu-item">
            <a href="#attendance-record" class="menu-link" data-section="attendance-record">
              <i class="bi bi-circle"></i>
              <span class="menu-text">考勤记录</span>
            </a>
          </li>
          <li class="menu-item">
            <a href="#leave-management" class="menu-link" data-section="leave-management">
              <i class="bi bi-circle"></i>
              <span class="menu-text">请假管理</span>
            </a>
          </li>
        </ul>
      </li>
      
      <li class="menu-item">
        <a href="#" class="menu-link" id="salaryManagement">
          <i class="bi bi-cash-stack"></i>
          <span class="menu-text">薪资管理</span>
          <i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul class="submenu">
          <li class="menu-item">
            <a href="#salary-list" class="menu-link" data-section="salary-list">
              <i class="bi bi-circle"></i>
              <span class="menu-text">工资列表</span>
            </a>
          </li>
          <li class="menu-item">
            <a href="#salary-setting" class="menu-link" data-section="salary-setting">
              <i class="bi bi-circle"></i>
              <span class="menu-text">薪资设置</span>
            </a>
          </li>
        </ul>
      </li>
      
      <li class="menu-item">
        <a href="#notice-list" class="menu-link" data-section="notice-list">
          <i class="bi bi-megaphone"></i>
          <span class="menu-text">公告管理</span>
        </a>
      </li>
      
      <li class="menu-item">
        <a href="#system-setting" class="menu-link" data-section="system-setting">
          <i class="bi bi-gear"></i>
          <span class="menu-text">系统设置</span>
        </a>
      </li>
    </ul>
  </div>

  <!-- 主内容区 -->
  <div class="main-content" id="main-content">
    <div class="navbar">
      <button class="btn btn-light" id="toggle-sidebar">
        <i class="bi bi-list"></i>
      </button>
      
      <div class="user-dropdown dropdown">
        <a class="dropdown-toggle" href="#" role="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
          <div class="user-avatar" id="user-avatar"></div>
          <span id="username-display">用户名</span>
          <i class="bi bi-chevron-down ms-2"></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
          <li><a class="dropdown-item" href="#profile"><i class="bi bi-person me-2"></i>个人信息</a></li>
          <li><a class="dropdown-item" href="#settings"><i class="bi bi-gear me-2"></i>个人设置</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#" id="logout-btn"><i class="bi bi-box-arrow-right me-2"></i>退出登录</a></li>
        </ul>
      </div>
    </div>
    
    <!-- 控制台内容 -->
    <div class="content-section active" id="dashboard">
      <h2 class="mb-4">控制台</h2>
      
      <div class="dashboard-stats">
        <div class="stat-card">
          <div class="stat-icon bg-primary-soft">
            <i class="bi bi-person"></i>
          </div>
          <div class="stat-details">
            <h3 class="stat-value">86</h3>
            <p class="stat-label">员工总数</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon bg-success-soft">
            <i class="bi bi-diagram-3"></i>
          </div>
          <div class="stat-details">
            <h3 class="stat-value">7</h3>
            <p class="stat-label">部门数量</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon bg-warning-soft">
            <i class="bi bi-calendar-check"></i>
          </div>
          <div class="stat-details">
            <h3 class="stat-value">92%</h3>
            <p class="stat-label">出勤率</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon bg-danger-soft">
            <i class="bi bi-exclamation-triangle"></i>
          </div>
          <div class="stat-details">
            <h3 class="stat-value">5</h3>
            <p class="stat-label">待处理事项</p>
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="col-lg-7 mb-4">
          <div class="content-wrapper">
            <h4 class="mb-3">最近公告</h4>
            <div class="recent-activities">
              <div class="activity-item">
                <div class="activity-icon bg-primary-soft">
                  <i class="bi bi-megaphone"></i>
                </div>
                <div class="activity-details">
                  <h5 class="activity-title">公司年度体检安排</h5>
                  <p class="mb-1">公司将在下周安排全体员工进行年度体检，请各部门做好相关准备工作...</p>
                  <span class="activity-time">2023-12-15 10:30</span>
                </div>
              </div>
              
              <div class="activity-item">
                <div class="activity-icon bg-success-soft">
                  <i class="bi bi-megaphone"></i>
                </div>
                <div class="activity-details">
                  <h5 class="activity-title">系统升级公告</h5>
                  <p class="mb-1">为提升系统性能，系统将于本周六凌晨2:00-4:00进行升级维护，期间系统将暂停使用...</p>
                  <span class="activity-time">2023-12-12 16:45</span>
                </div>
              </div>
              
              <div class="activity-item">
                <div class="activity-icon bg-warning-soft">
                  <i class="bi bi-megaphone"></i>
                </div>
                <div class="activity-details">
                  <h5 class="activity-title">年终奖金发放通知</h5>
                  <p class="mb-1">2023年度年终奖金将于本月25日随工资一起发放，请各位同事注意查收...</p>
                  <span class="activity-time">2023-12-10 09:15</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="col-lg-5 mb-4">
          <div class="content-wrapper">
            <h4 class="mb-3">待办事项</h4>
            <ul class="list-group">
              <li class="list-group-item d-flex justify-content-between align-items-center">
                <div>
                  <i class="bi bi-circle-fill text-danger me-2" style="font-size: 10px;"></i>
                  审批张三的请假申请
                </div>
                <span class="badge bg-danger rounded-pill">紧急</span>
              </li>
              <li class="list-group-item d-flex justify-content-between align-items-center">
                <div>
                  <i class="bi bi-circle-fill text-warning me-2" style="font-size: 10px;"></i>
                  完成本月考勤统计
                </div>
                <span class="badge bg-warning text-dark rounded-pill">重要</span>
              </li>
              <li class="list-group-item d-flex justify-content-between align-items-center">
                <div>
                  <i class="bi bi-circle-fill text-primary me-2" style="font-size: 10px;"></i>
                  更新部门架构图
                </div>
                <span class="badge bg-primary rounded-pill">一般</span>
              </li>
              <li class="list-group-item d-flex justify-content-between align-items-center">
                <div>
                  <i class="bi bi-circle-fill text-info me-2" style="font-size: 10px;"></i>
                  准备周会演示材料
                </div>
                <span class="badge bg-info rounded-pill">计划</span>
              </li>
              <li class="list-group-item d-flex justify-content-between align-items-center">
                <div>
                  <i class="bi bi-circle-fill text-success me-2" style="font-size: 10px;"></i>
                  审核新员工入职材料
                </div>
                <span class="badge bg-success rounded-pill">进行中</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 其他内容区域（初始为隐藏状态） -->
    <div class="content-section" id="user-list" style="display: none;">
      <h2 class="mb-4">用户列表</h2>
      <div class="content-wrapper">
        <!-- 用户列表内容 -->
        <p>用户列表内容将在这里显示...</p>
      </div>
    </div>
    
    <!-- 更多内容区域... -->
    
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/auth.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 检查是否已登录
      if (!isLoggedIn()) {
        window.location.href = 'login.html';
        return;
      }
      
      // 获取当前用户信息
      const currentUser = getCurrentUser();
      
      // 更新用户名显示
      const usernameDisplay = document.getElementById('username-display');
      if (usernameDisplay && currentUser) {
        usernameDisplay.textContent = currentUser.username || '用户';
      }
      
      // 更新用户头像
      const userAvatar = document.getElementById('user-avatar');
      if (userAvatar && currentUser && currentUser.username) {
        userAvatar.textContent = currentUser.username.charAt(0).toUpperCase();
      }
      
      // 侧边栏折叠/展开
      const sidebar = document.getElementById('sidebar');
      const mainContent = document.getElementById('main-content');
      const toggleSidebarBtn = document.getElementById('toggle-sidebar');
      
      toggleSidebarBtn.addEventListener('click', function() {
        sidebar.classList.toggle('collapsed');
        mainContent.classList.toggle('expanded');
      });
      
      // 移动端关闭侧边栏
      const closeSidebarBtn = document.getElementById('close-sidebar');
      if (closeSidebarBtn) {
        closeSidebarBtn.addEventListener('click', function() {
          sidebar.classList.add('collapsed');
          mainContent.classList.add('expanded');
        });
      }
      
      // 展开/折叠子菜单
      const menuWithSubmenu = document.querySelectorAll('.sidebar-menu .menu-link[id]');
      menuWithSubmenu.forEach(menu => {
        menu.addEventListener('click', function(e) {
          e.preventDefault();
          const parent = this.parentElement;
          parent.classList.toggle('open');
        });
      });
      
      // 切换内容区域
      const menuLinks = document.querySelectorAll('.menu-link[data-section]');
      const contentSections = document.querySelectorAll('.content-section');
      
      menuLinks.forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          
          // 移除所有菜单的活动状态
          menuLinks.forEach(item => item.classList.remove('active'));
          
          // 添加当前菜单的活动状态
          this.classList.add('active');
          
          // 隐藏所有内容区域
          contentSections.forEach(section => {
            section.style.display = 'none';
            section.classList.remove('active');
          });
          
          // 显示当前选中的内容区域
          const targetId = this.getAttribute('data-section');
          const targetSection = document.getElementById(targetId);
          if (targetSection) {
            targetSection.style.display = 'block';
            targetSection.classList.add('active');
          }
          
          // 移动端自动折叠侧边栏
          if (window.innerWidth < 768) {
            sidebar.classList.add('collapsed');
            mainContent.classList.add('expanded');
          }
        });
      });
      
      // 退出登录
      const logoutBtn = document.getElementById('logout-btn');
      logoutBtn.addEventListener('click', function(e) {
        e.preventDefault();
        
        // 显示确认对话框
        if (confirm('确定要退出登录吗？')) {
          logout()
            .then(() => {
              // 退出成功后跳转到登录页
              window.location.href = 'login.html';
            })
            .catch(error => {
              alert('退出登录失败：' + (error.message || '未知错误'));
            });
        }
      });
    });
  </script>
</body>
</html> 